{extend name="main"}

{block name="style"}

<style type="text/css">

    .flex-lable {

        width: 120px;

        color: #6c757d;

        text-align: right;

        padding-right: 10px;

    }



    .el-image-viewer__img {

        transition: all .3s;

        -moz-transition: all .3s;

        -webkit-transition: all .3s;

        -o-transition: all .3s;

    }



    .w-400px {

        width: 400px !important;

    }



    .status {

        position: absolute;

        right: 5px;

        top: 5px;

        background-color: #FFF;

        border: solid 1px #FF6D06;

        color: #FF6D06;

        width: 60px;

        height: 20px;

        line-height: 18px;

        text-align: center;

        border-radius: 10px;

        z-index: 100;

    }



    .status.success {

        border: solid 1px #28a745;

        color: #28a745;

    }



    .status.danger {

        border: solid 1px #dc3545;

        color: #dc3545;

    }



    .checkbox-id {

        position: absolute;

        left: 5px;

        top: 5px;

    }



    .checkbox-id .el-checkbox__label {

        display: none;

    }



    .w-100px {

        width: 100px;

    }

</style>

{/block}

{block name="body"}

<div class="bg-white mb-3 px-3">

    <el-form :model="search" @submit.native.prevent="submitForm" ref="search" label-position="right" class="flex py-3">



        <el-form-item label="搜索类型" prop="search_type" class="flex mb-0 pl-3">

            <el-select v-model="search.search_type" placeholder="请选择" class="w-100px">

                <el-option key="uid" label="UID" value="uid"></el-option>

                <el-option key="mobile" label="手机号" value="mobile"></el-option>

            </el-select>

        </el-form-item>



        <el-form-item label="状态" prop="status" class="flex mb-0 pl-3">

            <el-select v-model="search.status" placeholder="请选择" class="w-100px">

                <el-option key="all" label="全部" :value="null"></el-option>

                <el-option :key="0" label="待审核" :value="0"></el-option>

                <el-option :key="1" label="已通过" :value="1"></el-option>

                <el-option :key="2" label="已拒绝" :value="2"></el-option>

            </el-select>

        </el-form-item>



        <el-form-item :label="getSearchType()" prop="key" class="flex mb-0 pl-3">

            <el-input v-model="search.key" placeholder="请输入你想搜索的关键词"></el-input>

        </el-form-item>



        <el-form-item class="flex mb-0 pl-3">

            <el-button type="primary" @click="initHtml">查询</el-button>

            <el-button @click="resetForm('search')">重置</el-button>

        </el-form-item>

    </el-form>

</div>

<div class="bg-white p-3">

    <div class="table-responsive py-3 flex flex-center">

        <el-checkbox :indeterminate="indeterminate" v-model="checkAll" @change="handleCheckAllChange">全选</el-checkbox>

        <div class="px-1"></div>

        <el-button type="success" size="mini" @click="setStatusALL(1)">批量通过</el-button>

        <el-button type="danger" size="mini" @click="setStatusALL(2)">批量拒绝</el-button>

    </div>

    <div class="row">

        <div class="col-auto mb-3" v-for="(v,index) in tableData">

            <div class="border position-relative" style="width:220px;">

                <el-checkbox v-model="multipleSelection" :label="v" class="checkbox-id text-center"></el-checkbox>

                <div class="status success small" v-if="v.status==1">已通过</div>

                <div class="status danger small" v-else-if="v.status==2">已拒绝</div>

                <div class="status info small" v-else-if="v.status=='loading'" :loading="true">加载中</div>

                <div class="status info small" v-else>待审核</div>

                <!-- /uploads/real_name/img3/20210402/e04a91c9a16ec3d5c925c54037c5c137.png -->

                <el-image style="width: 100%; height: 160px;cursor: pointer;" :src="v.after_avatar" fit="cover"

                    @click="openImageViewer(index);"></el-image>

                <div class="bg-light text-center py-2 small flex flex-center px-1">

                    <!-- <div class="flex-1 text-truncate">{{v.mobile}}</div> -->

                    <div class="flex-1 text-truncate">{{v.nickname}}</div>

                    <!-- <div class="pl-1">{{v.nickname}}</div> -->

                    <el-link type="success" @click="setStatus(v,1)" v-if="v.status==0">通过</el-link>

                    <div class="pl-1"></div>

                    <el-link type="danger" @click="setStatus(v,2)" v-if="v.status==0">拒绝</el-link>

                </div>

            </div>

        </div>

    </div>

    <div class="table-responsive py-3 text-center">

        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"

            :current-page="search.page" :page-sizes="[10,50,100,200]" :page-size="search.pageSize"

            layout="total, sizes, prev, pager, next, jumper" :total="search.total">

        </el-pagination>

    </div>

</div>

<div class="el-image-viewer__wrapper" style="z-index: 2000;" v-if="viewer.index !== null">

    <div class="el-image-viewer__mask"></div>

    <span class="el-image-viewer__btn el-image-viewer__close" @click="closeImageViewer">

        <i class="el-icon-circle-close h4 mb-0"></i>

    </span>

    <span class="el-image-viewer__btn el-image-viewer__prev" @click="viewerPrev">

        <i class="el-icon-arrow-left"></i>

    </span>

    <span class="el-image-viewer__btn el-image-viewer__next" @click="viewerNext">

        <i class="el-icon-arrow-right"></i>

    </span>

    <div class="el-image-viewer__btn el-image-viewer__actions" :class="{'w-400px':tableData[viewer.index].status===0}">

        <div class="el-image-viewer__actions__inner">

            <i class="el-icon-zoom-out" @click="viewerZoomOut"></i>

            <i class="el-icon-zoom-in" @click="viewerZoomIn"></i>

            <i class="el-image-viewer__actions__divider"></i>

            <i class="el-icon-full-screen" v-if="viewer.is_screen" @click="viewerIsScreen"></i>

            <i class="el-icon-c-scale-to-original" v-else @click="viewerIsScreen"></i>

            <i class="el-image-viewer__actions__divider"></i>

            <i class="el-icon-refresh-left" @click="viewerRotateLeft"></i>

            <i class="el-icon-refresh-right" @click="viewerRotateRight"></i>

            <i class="el-image-viewer__actions__divider" v-if="tableData[viewer.index].status===0"></i>

            <el-button-group class="text-nowrap" v-if="tableData[viewer.index].status===0">

                <el-button type="success" size="mini" @click="setStatus(tableData[viewer.index],1,viewerNext())"

                    icon="el-icon-check" round></el-button>

                <el-button type="danger" size="mini" @click="setStatus(tableData[viewer.index],2,viewerNext())"

                    icon="el-icon-close" round></el-button>

            </el-button-group>

        </div>

    </div>

    <div class="el-image-viewer__canvas">

        <img :src="tableData[viewer.index].after_avatar" class="el-image-viewer__img" :style="getViewerStyle()" ref="viewerImage"

            @mousewheel="viewerMousewheel">

    </div>

</div>

{/block}

{block name="script"}

<script type="text/javascript">

    var loading = null;

    var vm = new Vue({

        el: '#app',

        data: {

            view: XYBase.view,

            labelPosition: 'right',

            viewer: {

                index: null,

                scale: 1,

                rotate: 0,

                isDown: false,

                is_screen: true

            },

            multipleSelection: [],

            multipleSelectionIndex: 0,

            indeterminate: false,

            checkAll: false,

            activeName: 'logo',

            search: {

                search_type:'uid',

                page: 1,

                // status: null,
                status:{:request()->get('status',"\'all\'")},

                total: 0,

                pageSize: 10

            }, tableData: [],

        },

        watch: {

            view: XYBase.viewWatch,

            multipleSelection(val, oldVal) {

                var count = val.length;

                var allCount = this.tableData.length;

                this.indeterminate = count > 0 && count !== allCount;

                this.checkAll = count > 0 && count === allCount;

            },

        },

        created() {

            XYBase.created(this);

        },

        methods: {

            checkboxT(row, index) {

                if (row.status == 0) {

                    return true;

                } else {

                    return false;

                }

            },

            handleCheckAllChange(val) {

                if (val) {

                    this.multipleSelection = this.tableData;

                } else {

                    this.multipleSelection = [];

                }

            },

            getSearchType() {

                var text = 'UID';

                switch (this.search.search_type) {

                    case 'uid':

                        text = 'UID';

                        break;

                    case 'mobile':

                        text = '手机号';

                        break;

                }

                return text;

            },

            getViewerStyle() {

                var style = {

                    transform: 'scale(' + this.viewer.scale + ') rotate(' + this.viewer.rotate + 'deg)'

                };

                if (this.viewer.is_screen) {

                    style.maxHeight = '100%';

                    style.maxWidth = '100%';

                }

                return style;

            },

            closeImageViewer() {

                document.body.style = '';

                this.viewer.index = null;

            },

            openImageViewer(index) {

                document.body.style = "overflow: hidden;padding-right:17px;";

                this.viewer.index = index;

                this.viewer.scale = 1;

                this.viewer.rotate = 0;

                this.viewer.is_screen = true;

            },

            viewerMousewheel(event) {

                if (event.deltaY > 0) {

                    if (this.viewer.scale <= 0.2) return;

                    this.viewer.scale = this.viewer.scale - 0.02;

                } else {

                    this.viewer.scale = this.viewer.scale + 0.02;

                }

            },

            viewerZoomOut() {

                if (this.viewer.scale <= 0.3) return;

                this.viewer.scale = this.viewer.scale - 0.2;

            },

            viewerZoomIn() {

                this.viewer.scale = this.viewer.scale + 0.2;

            },

            viewerIsScreen(index) {

                this.viewer.scale = 1;

                this.viewer.rotate = 0;

                this.viewer.is_screen = !this.viewer.is_screen;

            },

            viewerRotateLeft() {

                this.viewer.rotate = this.viewer.rotate - 90;

            },

            viewerRotateRight() {

                this.viewer.rotate = this.viewer.rotate + 90;

            },

            viewerNext() {

                var index = this.viewer.index;

                if (this.tableData[this.viewer.index + 1])

                    this.viewer.index++;

                else

                    XYBase.msg('已经是最后一张了');

            },

            viewerPrev() {

                var index = this.viewer.index;

                if (this.tableData[this.viewer.index - 1])

                    this.viewer.index--;

                else

                    XYBase.msg('已经是第一张了');

            },

            resetForm: function (formName) {

                this.$refs[formName].resetFields();

            },

            handleSizeChange(val) {

                this.search.page = 1;

                this.search.pageSize = val;

                this.initHtml();

            },

            setStatus(row, status, callback) {

                if (row.status == 'loading') return;

                var oldStatus = row.status;

                row.status = 'loading';

                $.ajax({

                    url: '/user/avatar/setStatus/' + row.id + '/' + status,

                    type: 'get',

                    data: {},

                    dataType: 'json',

                    error: function (err) {

                        row.status = oldStatus;

                        XYBase.error(XYBase.config.system_network_error);

                    },

                    success: function (ret) {

                        row.status = oldStatus;

                        if (ret) {

                            if (ret.code === 0) {

                                row.status = status;

                                row.update_time = ret.time;

                                XYBase.success(ret.msg);

                                if (typeof callback == 'function')

                                    callback();

                            } else XYBase.msg(ret.msg);

                        } else XYBase.error(XYBase.config.system_network_error);

                    }

                })

            },

            setStatusALL(status) {

                var _this = this;

                if (_this.multipleSelection.length < 1) return;

                loading = XYBase.openloading();

                _this.multipleSelectionIndex = 0;

                _this.setStatusALLAjax(status);

            },

            setStatusALLAjax(status) {

                var _this = this;

                var D = _this.multipleSelection[_this.multipleSelectionIndex];

                if (D) {

                    loading.setText((_this.multipleSelectionIndex + 1) + '/' + _this.multipleSelection.length);

                    $.ajax({

                        url: '/user/avatar/setStatus/' + D.id + '/' + status,

                        type: 'get',

                        data: {},

                        dataType: 'json',

                        error: function (err) {

                            loading.close();

                            _this.multipleSelectionIndex = 0;

                            // _this.$refs.tableList.clearSelection();

                        },

                        success: function (ret) {

                            if (ret) {

                                if (ret.code === 0) {

                                    _this.multipleSelection[_this.multipleSelectionIndex].status = status;

                                    _this.multipleSelection[_this.multipleSelectionIndex].update_time = ret.time;

                                    _this.multipleSelectionIndex++;

                                    _this.setStatusALLAjax(status);

                                } else {

                                    _this.multipleSelectionIndex++;

                                    _this.setStatusALLAjax(status);

                                }

                            } else {

                                XYBase.error(XYBase.config.system_network_error);

                                loading.close();

                                _this.multipleSelectionIndex = 0;

                                // _this.$refs.tableList.clearSelection();

                            }

                        }

                    })

                } else {

                    loading.close();

                    _this.multipleSelectionIndex = 0;

                    // _this.$refs.tableList.clearSelection();

                    window.location.reload();

                }

            },

            handleCurrentChange(val) {

                this.search.page = val;

                this.initHtml();

            },

            initHtml() {

                var _this = this;

                _this.search.ajax = true;

                $.ajax({

                    url: '',

                    type: 'get',

                    data: _this.search,

                    dataType: 'json',

                    error: function (err) {

                        // console.log(err);

                        _this.search.ajax = false;

                        XYBase.error(XYBase.config.system_network_error);

                    },

                    success: function (res) {

                        console.log(res);

                        _this.search.ajax = false;

                        if (res) {

                            if (res.code == 0) {

                                _this.search.total = res.data.total;

                                _this.tableData = res.data.data;

                            } else {

                                XYBase.msg(res.msg);

                            }

                        } else {

                            XYBase.error(XYBase.config.system_network_error);

                        }

                    }

                });

            }

        }

    });

    $(function () {

        vm.initHtml();

        reloadWindowSize();

        $(window).resize(function () {

            reloadWindowSize();

        });

    });

    function reloadWindowSize(argument) {

        var winW = $(window).width();

        if (winW <= 576) {

            vm.labelPosition = 'top';

        } else {

            vm.labelPosition = 'right';

        }

    }

</script>

{/block}